<template>
  <div class="statistic-card">
    <div class="card-header">
      <div class="header-title">
        {{ title }}
      </div>
      <slot name="header-right"></slot>
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StatisticCard',
  components: {},
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.statistic-card {
  border: 1px solid #ddd;
  // box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.3);
  height: 100%;
  display: flex;
  flex-direction: column;
  .card-header {
    padding: 10px;
    font-size: 18px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    .header-title {
      font-weight: bold;
      color: #333;
      margin-right: 10px;
      flex: 1;
    }
  }
  .card-content {
    padding: 10px;
    flex: 1;
  }
}
</style>
